
<!-- 备件仓库管理 -->
<template>
    <div class="page">
        <div class="nuclein-query">
            <div>备件仓库管理</div>
            <div style="margin-left: auto;">
                <el-button size="mini" type="primary" @click="handleAdd">添加</el-button>

            </div>
        </div>
        <div class="content-row">
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column prop="productName" label="产品名称" align="center" width="120">
                </el-table-column>
                <el-table-column prop="productCount" label="产品入库总数量" align="center" width="120">
                </el-table-column>
                <el-table-column prop="productOutCount" label="产品出库总数量" align="center" width="120">
                </el-table-column>
                <el-table-column prop="productWarehouseCount" label="剩余总数量" align="center" width="120">
                </el-table-column>
                <el-table-column prop="warehousingTime" label="入库时间" align="center">
                </el-table-column>
                <el-table-column prop="estateName" label="所在小区" align="center" width="120" >
                </el-table-column>
                <el-table-column label="操作" align="center" width="220">
                    <template slot-scope="scope">
                        <el-button size="mini" plain type="primary" @click="handleUpdate(scope.row)">修改</el-button>
                        <el-button size="mini" plain type="primary" @click="handleOutCount(scope.row.sysWorkWarehouseId)">出库</el-button>
                        <el-button size="mini" plain type="danger"
                            @click="handleDelete(scope.row.sysWorkWarehouseId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageLimit.page" :page-sizes="[10, 20, 30, 40]" :page-size="pageLimit.size"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="dialogForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="产品名称" :label-width="formLabelWidth" prop="productName">
                    <el-input v-model.trim="dialogForm.productName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="产品入库总数量" :label-width="formLabelWidth" prop="productCount">
                    <el-input :disabled="disabBool" v-model.trim="dialogForm.productCount" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所在小区" :label-width="formLabelWidth" prop="estateId">
                    <el-select v-model="dialogForm.estateId" placeholder="请选择所在小区">
                        <el-option v-for="item in estateIdList" :key="item.estateId" :label="item.estateName"
                            :value="item.estateId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="出库" :visible.sync="dialogFormVisibleCount">
            <el-form :model="outCount" :rules="rul" ref="outCount" label-width="120px" class="demo-ruleForm">
                <el-form-item label="产品出库总数量" :label-width="formLabelWidth" prop="count">
                    <el-input type="number" :min="1" v-model.trim="outCount.count" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleCount = false">取 消</el-button>
                <el-button type="primary" @click="submitFormCount('outCount')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { WarehouseList, WarehouseAddUpdate, WarehouseDel, WarehouseUpdateOutCount, getEstate } from '../../api/api'
import commonFunction from '../../utils/commonFunction'
import commonData from '../../utils/commonData'
export default {
  data () {
    return {
      pageLimit: {
        page: 1,
        size: 10
      },
      dialogFormVisible: false,
      dialogFormVisibleCount: false,
      dialogVisible: false,
      disabBool: true, // 判断按钮选择
      total: 0,
      tableData: [],
      estateIdList: [],
      outCount: {
        sysWorkWarehouseId: '',
        count: ''
      },
      title: '添加',
      formLabelWidth: '140px',
      dialogForm: {
        estateId: '', // 小区id'
        productName: '', // 产品名称'
        productCount: '' // 产品入库总数量'
      },
      rul: {
        count: [{ required: true, message: '请输入产品出库总数量', trigger: 'blur' }]
      },
      rules: {
        productName: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
        productCount: [{ required: true, message: '请输入产品入库总数量', trigger: 'blur' }],
        estateId: [{ required: true, message: '请选择小区', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.gitList()
    this.getMaintenance()
  },
  watch: {
    dialogFormVisible (newVal, oldVal) {
      if (!newVal) {
        this.dialogForm = {
          productName: '', // 产品名称'
          productCount: '', // 产品入库总数量'
          estateId: '' // 小区'
        }
      }
    }
  },
  methods: {
    // 获取维修人员列表、设备列表、小区列表
    getMaintenance () {
      getEstate().then(res => {
        if (res.code === 0) {
          this.estateIdList = res.list
        }
      })
    },
    // 获取
    gitList () {
      WarehouseList({ ...this.pageLimit }).then(res => {
        if (res.code == 0) {
          const { total, records } = res.page
          this.tableData = records.map(ite => {
            const warehousingTime = commonFunction.getTimeFormat(+new Date(ite.warehousingTime), 'YYYY-MM-DD hh:mm:ss')
            return {
              ...ite,
              warehousingTime
            }
          })
          this.total = total
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    // 出库
    handleOutCount (e) {
      this.dialogFormVisibleCount = true
      this.outCount.sysWorkWarehouseId = e
    },
    // 添加
    handleAdd () {
      this.dialogFormVisible = true
      this.disabBool = false
      this.title = '添加'
    },
    // 修改
    handleUpdate (e) {
      this.disabBool = true
      this.dialogFormVisible = true
      this.title = '修改'
      this.dialogForm.sysWorkWarehouseId = e.sysWorkWarehouseId
      this.dialogForm.productName = e.productName // 产品名称'
      this.dialogForm.productCount = e.productCount // 产品入库总数量'
      this.dialogForm.estateId = e.estateId // 备注'
    },
    // 删除
    handleDelete (e) {
      this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        WarehouseDel(e).then(res => {
          if (res.code === 0) {
            this.$message.success('删除成功')
            this.gitList()
          } else {
            this.$message.warning(res.msg)
          }
        })
      }).catch(() => {
        this.$message.warning('您已取消删除')
      })
    },
    // 出库提交
    submitFormCount (formName) {
      this.$refs[formName].validate((valid) => {
        const data = {
          ...this.outCount
        }
        WarehouseUpdateOutCount({ ...data }).then(res => {
          if (res.code === 0) {
            this.$message.success('出库成功')
            this.dialogFormVisibleCount = false
            this.gitList()
          } else {
            this.$message.warning(res.msg)
          }
        })
      })
    },
    // 确定提交
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = {
            ...this.dialogForm,
            sysWorkWarehouseId: this.dialogForm.sysWorkWarehouseId ? this.dialogForm.sysWorkWarehouseId : ''
          }
          WarehouseAddUpdate({ ...data }).then(res => {
            if (res.code === 0) {
              this.$message.success(this.dialogForm.sysWorkWarehouseId ? '编辑成功' : '添加成功')
              this.dialogFormVisible = false
              this.gitList()
            } else {
              this.$message.warning(res.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    // 分页
    handleSizeChange (val) {
      this.pageLimit.size = val
      this.gitList()
    },
    handleCurrentChange (val) {
      this.pageLimit.page = val
      this.gitList()
    }
  }
}
</script>

<style scoped>
.page {
    position: relative;
    height: 100%;
}

.dialog_butt {
    height: 60px;
    width: 100%;
    position: fixed;
    bottom: 0px;
}

.nuclein-query {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #DCDFE6;
}

.device-type {
    display: flex;
    align-items: center;
    padding: 20px 20px 10px 20px;
}

.device-type>p {
    margin-right: 20px;
}

.content-row {
    overflow: hidden;
}

.device-type {
    display: flex;
    align-items: center;
    padding: 20px 20px 10px 20px;
}

/* 分页 */
.pagination {
    width: 100%;
    padding: 20px;
    border-top: 1px solid #DCDFE6;
}
</style>
